<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画实现轮播图</title>
  <link rel="stylesheet" href="./style/marquee.css">
</head>
<body>

  <div class="marquee">
    <div class="content">
      <div class="list"><img src="../images/31586acad609c18dd865e7.jpg" alt=""></div>
      <div class="list"><img src="../images/54447b06000171a002560191.jpg" alt=""></div>
      <div class="list"><img src="../images/animaiton_bg.png" alt=""></div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
  $(()=>{
    console.log('页面元素加载完执行');
    //这里是一jquery操作DOM,修改CSS
    var outerWidth=300, 
        outerHeight=200,
        speed = 3;
    var $marquee = $('.marquee');//最外层div
    var $content = $marquee.find('.content');
    var $list = $content.find('.list');
    var listLength = $list.length;
    var contentWidth = outerWidth*listLength;
    //4.通过jquery操作CSS
    var style = document.styleSheets;
    //Step1:最外层设置width
    $marquee.css({
      "width" : `${outerWidth}px`,
      "height" : `${outerHeight}px`
    });
    $list.css({
      "width" : `${outerWidth}px`,
      "height" : `${outerHeight}px`
    });
    //3.设置contentWidth
    $content.css({
      "width" : `${contentWidth}px`,
      "animation":`run ${speed*listLength}s linear infinite`//核心,为content块设置动画
    })
    //样式表注入动画
    style[0].insertRule(`@keyframes run{
      100%{
        transform: translateX(-${contentWidth}px);
      }
    }
    `)
    var clone = $list.eq(0).clone();
    $content.append(clone);
  })
</script>
</html>